<template>
  <div class="container">
    <a-tabs default-active-key="1">
      <a-tab-pane key="1" tab="基础设置">
        <IForm :formFrame="frameBase" class="form-container" :formData.sync="form"></IForm>
      </a-tab-pane>
      <!-- <a-tab-pane key="2" tab="页面装修" force-render>
        <IForm :formFrame="frameUI" class="form-container" :formData.sync="form"></IForm>
      </a-tab-pane> -->
    </a-tabs>

    <!-- <IForm :formFrame="frame" class="form-container" :formData.sync="form"></IForm> -->
    <div slot="action" style="display: flex; justify-content: flex-end">
      <a-button class="btn" @click="cancel">取消</a-button>
      <a-button class="btn" type="primary" @click="submit">提交</a-button>
    </div>
    <!-- <AttrEditor :form.sync="form">
			<div slot="action">
				<a-button class="btn" @click="cancel">取消</a-button>
				<a-button class="btn" type="primary" @click="submit">提交</a-button>
			</div>
		</AttrEditor> -->
  </div>
</template>

<script>
// import AttrEditor from "./components/AttrEditor"
import IForm from '@/components/IForm'

const resourceType = 'boxes'

export default {
  components: {
    IForm,
    // AttrEditor
  },
  data() {
    return {
      form: {
        sku_ratio_type: 1,
      },
      categoryList: [],
      imageTagList: [],
      characterList: [],
    }
  },
  props: {
    uuid: {
      type: String,
    },
  },
  computed: {
    characterOptions() {
      return this.characterList.map((item) => {
        return {
          title: item.title,
          value: item.id,
        }
      })
    },
    categoryOptions() {
      return this.categoryList.map((item) => {
        return {
          title: item.title,
          value: item.id,
        }
      })
    },
    imageTagOptions() {
      return this.imageTagList.map((item) => {
        return {
          title: item.title,
          value: item.id,
        }
      })
    },
    frameBase() {
      return [
        {
          title: '标题',
          key: 'title',
          newline: true,
          required: true,
        },
        // {
        //   title: '角标',
        //   key: 'image_tag_id',
        //   type: 'select',
        //   span: 12,
        //   options: this.imageTagOptions
        // },
        // {
        //   title: '标签',
        //   key: 'tags',
        //   type: 'tags',
        //   tips:  '会显示在盲盒列表封面图下方，建议填写。如“热卖新品”等短语',
        //   newline: true,
        //   required: true,
        // },
        {
          title: '所属IP',
          key: 'category_ids',
          newline: true,
          required: true,
          type: 'multi_select',
          options: this.categoryOptions,
        },
        {
          title: '归属人物',
          key: 'character_ids',
          newline: true,
          required: true,
          type: 'multi_select',
          options: this.characterOptions,
        },
        {
          title: '列表封面',
          key: 'thumb',
          type: 'image',
          sizeLimit: 250,
          tips: '600*600',
          required: true,
          newline: true,
        },
        // {
        //   type: 'blank'
        // },

        // {
        //   type: 'blank',
        //   newline: true
        // },
        {
          title: '售价',
          key_prefix: '',
          type: 'mix_price',
          newline: true,
        },

        {
          title: '每个房间小盒数',
          key: 'sku_total',
          type: 'radio',
          newline: true,
          required: true,
          disabled: this.uuid ? true : false,
          default: 9,
          tips: '创建后不可更改，请谨慎选择',
          options: [
            {
              title: 4,
              value: 4,
            },
            {
              title: 5,
              value: 5,
            },
            {
              title: 6,
              value: 6,
            },
            {
              title: 7,
              value: 7,
            },
            {
              title: 8,
              value: 8,
            },
            {
              title: 9,
              value: 9,
            },
            {
              title: 10,
              value: 10,
            },
            {
              title: 11,
              value: 11,
            },
            {
              title: 12,
              value: 12,
            },
          ],
        },

        // {
        //   type: 'blank',
        //   newline: true
        // },

        {
          title: '商品预览图',
          key: 'detail_images',
          span: 20,
          sizeLimit: 400,
          type: 'images',
          tips: '宽度1024以下，长图建议切成多张小图上传',
          required: true,
          newline: true,
        },
        // {
        //   type: 'blank',
        //   newline: true,
        // },
        {
          title: '商品状态',
          key: 'sales_status',
          type: 'sales_status',
          tips: '打开上架',
          required: true,
          newline: true,
        },
      ]
    },
    frameUI() {
      return [
        {
          title: '房间背景图',
          key: 'room_bg_image',
          type: 'image',
          sizeLimit: 200,
          isShowImageTips: false,
          newline: true,
          tips: '参考图片规格包中尺寸规范，不设置则使用装修模块的设置',
        },
        {
          title: '桌面颜色',
          key: 'bg_color',
          newline: true,
          tips: '请填写颜色编码',
        },
        {
          title: '大盒顶部图(扁平风)',
          key: 'box_top_image',
          type: 'image',
          required: true,
          sizeLimit: 300,
          isShowImageTips: false,
          newline: true,
          tips: '800*450 png （用于扁平风格时9宫格顶部的图片）',
        },
        {
          title: '小盒未售出时图片（扁平风）',
          key: 'sku_thumb',
          type: 'image',
          required: true,
          sizeLimit: 150,
          isShowImageTips: false,
          newline: true,
          tips: '200*200',
        },
        {
          title: '开盒页3D立体盒子',
          key: 'sku_3d_image',
          isShowImageTips: false,
          // required: true,
          sizeLimit: 300,
          type: 'image',
          span: 24,
          newline: true,
          tips: '600*900 png, 不传则使用默认',
        },
        {
          type: 'blank',
          newline: true,
        },
        {
          title: '盒子展示风格',
          key: 'theme_mode',
          type: 'radio',
          newline: true,
          default: 4,
          options: [
            {
              title: '仅扁平风',
              value: 4,
            },
          ],
          span: 24,
          // default: 1,
          tips: '默认展示扁平风',
        },
        {
          title: '摇一摇次数',
          key: 'free_tips_limit',
          type: 'number',
          newline: true,
          span: 12,
          // default: 1,
          tips: '默认为2次，填0则隐藏摇一摇提示',
        },
        {
          title: '透视卡',
          key: 'is_show_box',
          type: 'boolean',
          newline: true,
          span: 6,
          default: 1,
          tips: '是否显示',
        },
        {
          title: '排除卡',
          key: 'is_exclude_box',
          type: 'boolean',
          // newline: true,
          span: 6,
          default: 1,
          tips: '是否显示',
        },
        {
          title: '开盒榜单',
          key: 'is_hidden_sku_rank',
          type: 'boolean',
          // newline: true,
          span: 6,
          default: 0,
          tips: '是否显示',
        },
        // {
        //   type: 'blank',
        //   newline: true,
        // },
        // {
        //   title: '商品预览图',
        //   key: 'detail_images',
        //   span: 20,
        //   type: 'images',
        //   tips: '宽度1024以下，长图建议切成多张小图上传',
        //   required: true,
        //   newline: true
        // },
      ]
    },
  },
  created() {},
  mounted() {
    this.uuid = this.uuid || this.$route.params.uuid

    this.$http.get('/ip/categories').then((res) => {
      this.categoryList = res.data.list
    })
    this.$http
      .get('/categories/lists', {
        params: {
          type: 'character',
        },
      })
      .then((res) => {
        // console.log('/categories/lists',res)
        this.characterList = res.data.list
      })
    this.$http.get('/image-tags').then((res) => {
      this.imageTagList = res.data.list
    })

    // this.initForm()
    this.getData()
  },
  watch: {
    uuid() {
      this.initForm()
    },
  },
  methods: {
    getData() {
      if (this.uuid) {
        this.$http
          .get(`/carddrawer/show`, {
            params: {
              id: this.uuid,
            },
          })
          .then((res) => {
            console.log('详情', res)
            this.form = res.data.info
          })
      }
    },
    initForm() {
      if (this.uuid) {
        this.$http(`/${resourceType}/${this.uuid}`).then((res) => {
          this.form = res.data.info
          console.log('form', this.form)
        })
      } else {
        this.form = {
          ...this.$initForm(this.frameBase),
          ...this.$initForm(this.frameUI),
        }
      }
    },
    cancel() {
      this.$emit('cancel')
      // this.$router.back(-1)
    },
    create() {
      console.log(this.form)

      this.$http
        .post(`/carddrawer/create`, {
          ...this.form,
        })
        .then((res) => {
          this.$message.success('创建成功')
          this.$emit('success')
          this.uuid = ''
          this.form = {}
          // this.$router.push({
          // 	path: './list'
          // })
        })
    },
    update() {
      this.$http
        .post(`/carddrawer/update`, {
          ...this.form,
        })
        .then((res) => {
          this.$message.success('更新成功')
          this.$emit('success')
          this.uuid = ''
          this.form = {} // this.$router.push({ //  path: '../list' // })
        })
    },
    submit() {
      if (this.uuid) this.update()
      else this.create()
    },
  },
}
</script>

<style lang="scss" scoped>
.form-container {
  padding-bottom: 120px;
}

.container {
  .btn {
    margin-right: 30px;
  }
}
</style>
